<template>
  <div class="home">
    <Banner :src1="src1" :backgroundCss="backgroundCss"></Banner>
    <div class="content">
      <div class="choose clearfix">
          <h3>请选择您遇到的问题</h3>
          <Card>
            <Menu mode="horizontal"  active-name="1">
              <MenuItem name="1">西服工艺<span> </span></MenuItem>
              <MenuItem name="2">
                <li @click="modal10=true">订单录入</li>
                <span></span>
              </MenuItem>
              <MenuItem name="3">衬衣成衣<span> </span></MenuItem>
              <MenuItem name="4">RCMTM面料<span> </span></MenuItem>
              <MenuItem name="5">客供面料<span> </span></MenuItem>
            </Menu>
            <ul class="question">
              <li v-for="item in chooseData">
                <p>
                  <Icon :type="item.logo"></Icon>
                  {{item.title}}
                </p>
              </li>
            </ul>
          </Card>
        <Modal
          title="订单录入"
          v-model="modal10"
          class-name="vertical-center-modal" class="orderInModal">
          <h3>自主设计模块刺绣图片如何上传</h3>
          <p>登陆下单系统->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”登陆下单系统->"深绣位置、线号、刺绣内->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”</p>
          <div class="img">
            <img src="" alt="">
          </div>
          <p>预览：订单保存后从订单详情里查看</p>
          <div class="img">
            <img src="" alt="">
          </div>
          <p>登陆下单系统->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”登陆下单系统->"深绣位置、线号、刺绣内->"深度设计"->"刺绣设计"->选择刺绣位置、线号、刺绣内容录“绣花专用自”</p>
          <div class="img">
            <img src="" alt="">
          </div>
          <p>预览：订单保存后从订单详情里查看</p>

        </Modal>
      </div>
      <div class="findAns clearfix">
        <h3>自己寻找答案
          <a href="javascript:;">更多问题分类 >></a>
        </h3>
        <div  class="answer"  style="height: 455px">
              <ul >
                <li>
                  <Card>
                     <div>
                       <div class="cardTop">
                         <p>工艺展示</p>
                         <div>
                           <img src=".././assets/images/i-gyzs.png" alt="">
                         </div>
                       </div>
                       <ul class="cardFoot">
                         <li>
                           <a href="javascript:;">礼服工艺</a>
                         </li>
                         <li>
                           <a href="javascript:;">马甲工艺</a>
                         </li>
                         <li>
                           <a href="javascript:;">大衣工艺</a>
                         </li>
                         <li>
                           <a href="javascript:;">衬衣工艺</a>
                         </li>
                         <li>
                           <a href="javascript:;">西服工艺</a>
                         </li>
                         <li>
                           <a href="javascript:;">查看更多</a>
                         </li>

                       </ul>
                     </div>
                  </Card>
                </li>
                <li>
                  <Card>
                    <div>
                      <div class="cardTop">
                        <p>工艺展示</p>
                        <div>
                          <img src=".././assets/images/i-mlfl.png" alt="">
                        </div>
                      </div>
                      <ul class="cardFoot">
                        <li>
                          <a href="javascript:;">礼服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">马甲工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">大衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">衬衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">西服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">查看更多</a>
                        </li>

                      </ul>
                    </div>
                  </Card>
                </li>
                <li>
                  <Card>
                    <div>
                      <div class="cardTop">
                        <p>工艺展示</p>
                        <div>
                          <img src=".././assets/images/i-jqxg.png" alt="">
                        </div>
                      </div>
                      <ul class="cardFoot">
                        <li>
                          <a href="javascript:;">礼服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">马甲工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">大衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">衬衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">西服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">查看更多</a>
                        </li>

                      </ul>
                    </div>
                  </Card>
                </li>
                <li>
                  <Card>
                    <div>
                      <div class="cardTop">
                        <p>工艺展示</p>
                        <div>
                          <img src=".././assets/images/i-gyzs.png" alt="">
                        </div>
                      </div>
                      <ul class="cardFoot">
                        <li>
                          <a href="javascript:;">礼服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">马甲工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">大衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">衬衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">西服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">查看更多</a>
                        </li>

                      </ul>
                    </div>
                  </Card>
                </li>
                <li>
                  <Card>
                    <div>
                      <div class="cardTop">
                        <p>工艺展示</p>
                        <div>
                          <img src=".././assets/images/i-gyzs.png" alt="">
                        </div>
                      </div>
                      <ul class="cardFoot">
                        <li>
                          <a href="javascript:;">礼服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">马甲工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">大衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">衬衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">西服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">查看更多</a>
                        </li>

                      </ul>
                    </div>
                  </Card>
                </li>
                <li>
                  <Card>
                    <div>
                      <div class="cardTop">
                        <p>工艺展示</p>
                        <div>
                          <img src=".././assets/images/i-gyzs.png" alt="">
                        </div>
                      </div>
                      <ul class="cardFoot">
                        <li>
                          <a href="javascript:;">礼服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">马甲工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">大衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">衬衣工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">西服工艺</a>
                        </li>
                        <li>
                          <a href="javascript:;">查看更多</a>
                        </li>

                      </ul>
                    </div>
                  </Card>
                </li>
              </ul>
        </div>
      </div>
      <div class="contact clearfix">
        <h3>联系我们</h3>
        <ul class="conMethods">
          <li>
            <Card>
              <div style="text-align:center">
                <div class="userLogo">
                  <img src=".././assets/images/i-zxkf.png">
                  <h2>在线客服</h2>
                </div>
                <div class="people">
                  <p>适用人群</p>
                  <p>喜欢使用在线交流的用户</p>
                </div>
                <div class="btn">立即使用</div>
              </div>
            </Card>
          </li>
          <li>
            <Card>
              <div style="text-align:center">
                <div class="userLogo">
                  <img src=".././assets/images/i-zxpg.png">
                  <h2>在线派工</h2>
                </div>
                <div class="people">
                  <p>在线客服指导下进行操作</p>
                  <p>主要服务时间:7:30-17:00</p>
                </div>
                <div class="btn">立即使用</div>
              </div>
            </Card>
          </li>
          <li>
            <Card>
              <div style="text-align:center">
                <div class="userLogo">
                  <img src=".././assets/images/i-zxkf.png">
                  <h2>热线电话</h2>
                </div>
                <div class="people">
                  <p>客户服务热线</p>
                  <p>主要服务时间:7:00-21:00</p>
                </div>
                <div class="tel">4008-919-857</div>
              </div>
            </Card>
          </li>
          <li>
            <Card>
              <div style="text-align:center">
                <div class="userLogo">
                  <img src=".././assets/images/i-zxpg.png">
                  <h2>提建议</h2>
                </div>
                <div class="people">
                  <p>如果您对我司产品有任何建议</p>
                  <p>欢迎提出</p>
                </div>
                <div class="btn">立即使用</div>
              </div>
            </Card>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import Banner from '.././components/banner.vue'
export default {
  name: 'home',
  components:{
      Banner
  },
  data () {
    return {
      modal10: false,
      chooseData:[
        {
            logo:"cash",
            title:"自主设计模块图片设计自主设计模块图片设计"
        },
        {
          logo:"cash",
          title:"自主设计模块图片设计自主设计模块图片设计"
        },
        {
          logo:"cash",
          title:"自主设计模块图片设计自主设计模块图片设计"
        },
        {
          logo:"cash",
          title:"自主设计模块图片设计自主设计模块图片设计"
        },
        {
          logo:"cash",
          title:"自主设计模块图片设计自主设计模块图片设计"
        },
        {
          logo:"cash",
          title:"自主设计模块图片设计自主设计模块图片设计"
        },
        {
          logo:"cash",
          title:"自主设计模块图片设计自主设计模块图片设计"
        },
        {
          logo:"cash",
          title:"自主设计模块图片设计自主设计模块图片设计"
        }
      ],
      findAnsData:[],
      contactData:[],
      src1:require(".././assets/images/banner01.png"),
      backgroundCss:"index"
    }
  },
  created(){
    //this.getData();
  },
  methods:{
//      getData(){
//          this.axios.get("/login").
//            then((res)=>{
//             console.log(res)
//          }).catch((err)=>{
//              console.log(err)
//          })
//      }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.home>.content{
  background: #f5f7f9;
  padding-bottom: 70px;
  margin: 0 auto;
  width:1120px;
}
.home>.content  h3{
    height:70px;
    line-height:70px;
    font-weight: normal;
    font-size: 16px;
    color:#464c5b;
  }
  /*选择遇到的问题*/
.choose .ivu-card-body{
  padding: 0 !important;
  height:190px;
}
.choose .ivu-menu{
  height:50px;
  margin: 0 30px;
  z-index: 899 !important;
  border-radius: 20px;
}
  .choose .ivu-menu-item{
    width:194px;
    height: 50px;
    line-height:50px;
    text-align: center;
    font-size: 16px;
    color:#9ea7b4
  }
.choose .question{
  padding: 20px 0;
}
  .choose .question>li{
    height: 50px;
    line-height: 50px;
    width: 250px;
    float: left;
    padding: 0 30px;
  }
.choose .question>li>p{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  cursor: pointer;
}
.choose .question>li>p .ivu-icon{
  margin-right: 10px;
  font-size: 16px;
  color:#464c5b;
}
/*寻找答案*/
.findAns>h3>a{
  float: right;
  color: #464c5b;
  font-size: 14px;
}
  .answer>ul{
    height: 210px;
  }
.answer>ul>li{
  float: left;
}
.answer>ul>li:not(:nth-child(3n+1)){
  margin-left: 35px;
}
.answer>ul>li:not(:nth-last-child(1)):not(:nth-last-child(2)):not(:nth-last-child(3)){
  margin-bottom: 35px;
}
.answer>ul .ivu-card{
  width:350px;
  height:210px;
  padding: 0 35px;
}
.answer .cardTop{
  height:70px;
  line-height:70px;
  display: flex;
}
.answer .cardTop>p{
  width:65px;
  line-height: 70px;
  border-bottom: 2px solid #9ea7b4;
}
.answer .cardTop>div{
  width:210px;
  border-bottom: 2px solid #9ea7b4;
  margin-left: 4px;
  position: relative;
}
.answer .cardTop>div>img{
  display: block;
  height: 80px;
  width: 154px;
  position: absolute;
  top: -12px;
  left: 28px;
}
.answer .cardFoot{
  margin: 15px 0;
}
.answer .cardFoot li{
  float: left;
  line-height: 34px;
  width: 90px;
  text-align: left;
}
.answer .cardFoot li>a{
  color: #464c5b;
  font-size: 14px;
}
.answer .cardFoot li:last-child>a{
  color:#9ea7b4;
}
/*联系我们*/
.contact{height:356px;}
.conMethods>li{
  width:256px;
  height: 286px;
  float: left;
}
.conMethods>li .ivu-card{
  height:286px;
}
.conMethods>li:not(:first-child){
  margin-left: 32px;
}
.conMethods .userLogo>img{
  width: 66px;
  height: 66px;
  margin-top: 20px;
}
.conMethods .userLogo>h2{
  font-size: 16px;
  color: #464c5b;
  margin-top: 12px;
}
.conMethods .people{
    margin: 18px 0;
  }
.conMethods .people>p{
     height:28px;
    line-height: 28px;
    color:#464c5b;
    font-size: 16px;
  font-weight: bold;
   }
.conMethods .btn{
  width:120px;
  text-align: center;
  line-height: 40px;
  height:40px;
  border: 1px solid #9ea7b4;
  border-radius: 25px;
  margin: 0 auto;
  }
.conMethods .tel{
  font-size: 22px;
  line-height: 40px;
  font-weight: bold;
}
/*修改iview默认样式*/

/*修改iview导航默认下划线颜色*/
.choose .ivu-menu-horizontal{
  height:50px;
  line-height:50px;
}
.choose .ivu-menu-horizontal.ivu-menu-light:after{
  background: #e3e8ee;
}
/*iview卡片去除边框，添加圆角*/
.home>.content .ivu-card-bordered{
  border: none;
  border-radius: 20px;
}
/*去除卡片padding值*/
.home>.content .ivu-card-body{padding: 0 !important}
/*修改卡片默认阴影效果*/
.home>.content .ivu-card:hover{
  box-shadow: 0 1px 20px #000000;
}
/*修改导航下划线样式*/
.choose .ivu-menu-item>span{
  display: none;
  width: 64px;
  height: 2px;
  background: #464c5b;
  margin: 0 auto;
}
.choose  .ivu-menu-item-active span{
  display: block;
}
.choose .ivu-menu-item:hover span,
.choose .ivu-menu-item-selected.ivu-menu-item-active{
  display: block;
}
.choose .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,.choose  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,.choose  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,.choose  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
  color: #464c5b;
  border-bottom: none;
}
.choose .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item,.choose  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu{
  border-bottom: none;
}
/*清除浮动*/
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  font-size:0;
}
  /*订单录入弹窗样式*/
.orderInModal .ivu-modal-header {
  border-bottom: none;
  padding: 0;
}
.orderInModal .ivu-modal-body::-webkit-scrollbar {/*滚动条整体样式*/
  width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/
  height:370px;
  margin-top: 20px;
}
.orderInModal .ivu-modal-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #9ea7b4;
  background: #9ea7b4;
}
.orderInModal .ivu-modal-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #e9e9e9;
  border-radius: 5px;
  background: #e9e9e9;
}
.orderInModal .ivu-modal-body{
  padding: 0;
  height:390px;
  overflow: auto;
  margin-top: 18px;
}
.orderInModal .ivu-modal-body>h3{
  text-align: center;
  color: #464c5b;
  padding-bottom: 18px;
  font-size: 14px;
}
.orderInModal .ivu-modal-footer{
  display: none;
  border:none;
  padding: 12px 18px 31px 18px !important;
}
.orderInModal .ivu-modal-content{
  width:600px;
  height:460px;
  overflow: hidden;
  border-radius: 20px;
  padding: 0 20px 0px 30px;
  border-bottom: 20px solid #fff;
}
.orderInModal .ivu-modal-header .ivu-modal-header-inner{
  height:50px;
  line-height: 50px;
  color:#464c5b;
  font-size: 16px;
  border-bottom: 1px solid #e3e8ee;
  box-sizing: border-box;
}
.orderInModal .ivu-modal-body p{
  line-height: 24px;
  color: #46435b;
  font-size: 14px;
  text-indent: 2em;
}
.orderInModal .ivu-modal-body .img{
  width: 270px;
  height: 180px;
  margin: 20px auto;
  background: pink;
  border-radius: 20px;
}
.orderInModal .ivu-modal-body .img>img{
  width:100%;
  height:100%;
}
.orderInModal .btn{
  display: block;
}
</style>
